import React, { Component,useState } from 'react';
import axios from 'axios'
import PubSub from 'pubsub-js'
import {   Button ,Modal} from 'antd';
import 'antd/dist/antd.css'

const App = (e) => {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const showModal = () => {
      setIsModalVisible(true);
    };
  
    const handleOk = () => {
      const params=e.url instanceof Object?{
        id:e.url.id ,
        img:e.url.img,
        token:localStorage.getItem("token")
      }:{
        photo:e.url ,
        token:localStorage.getItem("token")
      };
      axios.get(e.canshu.url,{
        params
    })
    .then((res)=>{
      if (res.data.code==1) {
        PubSub.publish('arguigu',{type:"success", name:"删除成功",display:"flex"})
        e.gengxin()

        setTimeout(()=>{
          PubSub.publish('arguigu',{display:"none"})
        },1500)
      }else{
        PubSub.publish('arguigu',{type:"error", name:"删除失败",display:"flex"})
        setTimeout(()=>{
          PubSub.publish('arguigu',{display:"none"})
        },1500)
      }
    })
      setIsModalVisible(false);
    };
  
    const handleCancel = () => {
      setIsModalVisible(false);
    };
  
    return (
      <>
        <Button style={{display:e.display}} type="primary" onClick={showModal} danger>
          {e.name}
        </Button>
        <Modal cancelText="取消删除" okText="确认删除" width="648px" title={e.canshu.title} visible={isModalVisible} closable={false} onOk={handleOk} onCancel={handleCancel}  >
          
            <p>{e.canshu.tixing}</p>
        </Modal>
      </>
    );
  };
class index extends Component {
    state = { visible: false };
    showModal = () => {
        this.setState({
          visible: true,
        });
      };
    
      hideModal = () => {
        this.setState({
          visible: false,
        });
      };
    render() {
        const {name,display,url,gengxin,canshu}=this.props
        return (
            <div>
                <App canshu={canshu} gengxin={gengxin} url={url} display={display} name={name}/>
            </div>
        );
    }
}

export default index;